---
title: Layouts
description: >-
  Eine Einführung in Layouts - eine Astro-Komponenten-Art, mit der sich mehrere
  Seiten eine gemeinsame Gestaltung teilen können.
---

**Layouts** sind besondere [Astro-Komponenten](/de/basics/astro-components/), die nützlich für die Erstellung wiederverwendbarer Seitenvorlagen sind.

Eine Layout-Komponente wird üblicherweise verwendet, um einer [`.astro`- oder `.md`-Seite](/de/basics/astro-pages/) sowohl ein **Seiten-Gerüst** (`<html>`, ` <head>` und `<body>`-Tags) als auch einen `<slot />` zur Verfügung zu stellen, der bestimmt, wo im Layout der Seiteninhalt eingefügt werden soll.

Layouts enthalten häufig gemeinsame `<head>`-Elemente und gemeinsame UI-Elemente der Website, z.B. Kopfzeilen, Navigationsleisten und Fußzeilen.

Layouts werden normalerweise im Verzeichnis `src/layouts` deines Projekts abgelegt.

## Beispiel-Layout

```astro
---
// src/layouts/MeinLayout.astro
---
<html>
  <head>
    <meta charset="utf-8">
    <title>Meine coole Astro-Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <nav>
      <a href="#">Startseite</a>
      <a href="#">Beiträge</a>
      <a href="#">Kontakt</a>
    </nav>
    <article>
      <slot /> <!-- Dein Inhalt wird hier eingefügt -->
    </article>
  </body>
</html>
```

```astro {3} /</?MeinLayout>/
---
// src/pages/index.astro
import MeinLayout from '../layouts/MeinLayout.astro';
---
<MeinLayout>
  <p>Mein Seiteninhalt, umgeben von einem Layout!</p>
</MeinLayout>
```

📚 Lerne mehr über die Verwendung von [Slots](/de/basics/astro-components/#slots).

## Markdown-Layouts

Seitenlayouts sind besonders nützlich für [Markdown-Dateien](/de/guides/markdown-content/#markdown-seiten). Markdown-Dateien können eine spezielle `layout`-Eigenschaft am Anfang des Frontmatters verwenden, um anzugeben, welche `.astro`-Komponente als Seitenlayout verwendet werden soll.

```markdown {3}
---
# src/pages/posts/beitrag-1.md
layout: ../../layouts/BlogBeitragsLayout.astro
title: Blogbeitrag
description: Mein erster Blogbeitrag!
---
Dies ist ein Beitrag, der in Markdown geschrieben wurde.
```

Wenn eine Markdown-Seite ein Layout verwendet, übergibt sie eine `frontmatter`-Eigenschaft an die `.astro`-Komponente, die alle Frontmatter-Eigenschaften sowie die gerenderte HTML-Ausgabe der Seite enthält.

```astro /frontmatter(?:.\w+)?/
---
// src/layouts/BlogBeitragsLayout.astro
const {frontmatter} = Astro.props;
---
<html>
   <!-- ... -->
  <h1>{frontmatter.title}</h1>
  <h2>Autor des Beitrags: {frontmatter.author}</h2>
  <slot />
   <!-- ... -->
</html>
```

📚 Erfahre mehr über Astros Markdown-Unterstützung in unserer [Markdown-Anleitung](/de/guides/markdown-content/).

## Verschachtelung von Layouts

Layout-Komponenten müssen nicht eine ganze Seite im HTML-Format enthalten. Du kannst deine Layouts in kleinere Komponenten aufteilen und diese Komponenten dann wiederverwenden, um noch flexiblere, leistungsfähigere Layouts in deinem Projekt zu erstellen.

Beispielsweise könnte ein übliches Layout für Blogbeiträge einen Titel, ein Datum und einen Autor anzeigen. Eine `BlogBeitragsLayout.astro`-Layout-Komponente könnte diese Informationen zur Seite hinzufügen und für die Darstellung der restlichen Seitenelemente ein größeres, Website-weites Basis-Layout nutzen.

```astro {3} /</?BasisLayout>/
---
// src/layouts/BlogBeitragsLayout.astro
import BasisLayout from '../layouts/BasisLayout.astro'
const {frontmatter} = Astro.props;
---
<BasisLayout>
  <h1>{frontmatter.title}</h1>
  <h2>Autor des Beitrags: {frontmatter.author}</h2>
  <slot />
</BasisLayout>
```
